<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>modal</title>
    <style>
        * {
            margin: 0;
        }

        #sign_up {
            background: lightblue;
            cursor: pointer;
            /*    可以点击 */
        }

        #close {
            cursor: pointer;
        }

        #modal {
            display: none; /* 将先不展示的内容隐藏起来 */
            position: fixed; /* 固定定位*/
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6); /* rgb #rrggbb #ff0000 a: alpha 透明度 */
        }

        #content {
            background: #fff;
            margin: 20% auto;
            width: 300px;
            height: 100px;
            padding: 20px;
        }

        #close {
            font-size: 3em;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>modal demo 模态窗 </h1>
<span id="sign_up">注册</span>
<div id="modal">
    <div id="content">
        <span id="close">&times;</span>
        <p>张文远</p>
    </div>
</div>
<script>
    const

</script>
</body>
</html>